<template>
  <div>
    <el-container class="g-bd">
      <el-aside width="180px">
        <div
          class="blk"
          v-for="(item,index) in cart"
          :key="index"
        >
          <h2>{{item.name}}</h2>
          <ul>
            <li
              v-for="(i,index2) in cart[index].info"
              :key="index2"
              @click="changetyar(index,index2)"
            > <a
                href="#"
                :class="{'checss': curasi1 === index&&curasi2 === index2}"
              >{{i.name}}</a> </li>
          </ul>
        </div>
      </el-aside>
      <el-main>
        <div class="u-title">{{text}}</div>
        <!-- 字母表 -->
        <ul class="cart">
          <li
            v-for="(item,index) in zimu"
            :key="index"
            :class="{'redcol': curCheck === index}"
            @click="changeZiMu(index)"
          >
            <a href="#">{{item}}</a>
          </li>
        </ul>
        <!-- 歌手列表 -->
        <ul class="artists">
          <li
            v-for="(item,index) in artistCartInfo"
            :key="index"
          >
            <!-- 歌手头像（只有前10显示头像） -->
            <a
              href="#"
              @click.prevent="goartist(item.id)"
              v-if="index<10"
              class="headpic"
            >
              <img v-lazy="item.picUrl">
            </a>
            <!-- 名字 -->
            <p>
              <a class="name">{{item.name}}</a>
              <i
                class="iconfont"
                v-if="hasShow"
              ></i>
            </p>
          </li>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../../eventbus.js'
export default {
  data () {
    return {
      hasShow: false,
      cart: [
        { name: '全部', info: [{ typea: -1, areaa: -1, name: '全部' }] },
        {
          name: '华语', info: [
            { typea: 1, areaa: 7, name: '华语男歌手' },
            { typea: 2, areaa: 7, name: '华语女歌手' },
            { typea: 3, areaa: 7, name: '华语组合/乐队' },
          ]
        },
        {          name: '欧美', info: [
            { typea: 1, areaa: 96, name: '欧美男歌手' },
            { typea: 2, areaa: 96, name: '欧美女歌手' },
            { typea: 3, areaa: 96, name: '欧美组合/乐队' },
          ]        },
        {          name: '日本', info: [
            { typea: 1, areaa: 8, name: '日本男歌手' },
            { typea: 2, areaa: 8, name: '日本女歌手' },
            { typea: 3, areaa: 8, name: '日本组合/乐队' },
          ]        },
        {          name: '韩国', info: [
            { typea: 1, areaa: 16, name: '韩国男歌手' },
            { typea: 2, areaa: 16, name: '韩国女歌手' },
            { typea: 3, areaa: 16, name: '韩国组合/乐队' },
          ]        },
        {          name: '其它', info: [
            { typea: 1, areaa: 0, name: '其它男歌手' },
            { typea: 2, areaa: 0, name: '其它女歌手' },
            { typea: 3, areaa: 0, name: '其它组合/乐队' },
          ]        }

      ],
      zimu: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '其它'],
      typeq: 0,
      area: 0,
      initial: 0,
      artistCartInfo: [],
      curCheck: 0,
      text: '全部',
      curasi1: 0,
      curasi2: 0
    }
  },
  created () {
    bus.$on('isShow', val => {
      this.hasShow = val
    })
    this.getStart()
    // 获取分类对应的歌手列表
    this.getArtistCartInfo()
  },
  watch: {
    $route (to, from) {
      console.log(to.params, from.params)
      this.$router.go(0);
    }
  },
  methods: {
    getStart () {
      this.typeq = this.$route.query.type;
      this.areaa = this.$route.query.area;
      this.initial = this.$route.query.initial;
    },
    async getArtistCartInfo () {
      let res = await axios.get('https://autumnfish.cn//artist/list?type=' + this.typeq + '&area=' + this.area + '&initial=' + this.initial + '&limit=100')
      // console.log(res)
      this.artistCartInfo = res.data.artists
    },
    // 点击了字母表
    changeZiMu (ind) {
      // 修改红色块
      this.curCheck = ind
      // 修改initial
      if (ind === 0) { this.initial = -1 }
      else if (ind === this.zimu.length - 1) { this.initial = 0 }
      else {
        this.initial = this.zimu[ind]
      }
      this.getArtistCartInfo()
    },
    // 点击了侧边栏选项
    changetyar (ind, ind1) {
      // 改变选项颜色
      this.curasi1 = ind;
      this.curasi2 = ind1;
      // 改变type,area
      this.typeq = this.cart[ind].info[ind1].typea
      this.area = this.cart[ind].info[ind1].areaa
      // 改变标题
      this.text = this.cart[ind].info[ind1].name
      // console.log(this.typeq, this.area)
      this.getArtistCartInfo()

    },
    goartist (id) {
      this.$router.push({ path: '/artist', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
li {
  list-style: none;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
}
.el-container {
  // width: 980px;
  // min-height: 700px;
  // margin: 0 auto;
  // border: 1px solid #d3d3d3;
  // border-width: 0 1px;
  .el-aside {
    padding: 0 10px 40px;
    margin-top: 51px;
    .blk {
      margin: 5px 0 0;
      padding-top: 16px;
      border-top: 1px solid #d3d3d3;
      h2 {
        height: 25px;
        padding-left: 14px;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
      }
      ul {
        li {
          width: 160px;
          height: 29px;
          line-height: 29px;
          margin-bottom: 2px;
          a {
            display: block;
            width: 133px;
            height: 29px;
            line-height: 29px;
            padding-left: 27px;
            background-image: url(../../../assets/image/singer.png);
            background-position: 0 -29px;
            color: #333;
            font-size: 12px;
          }
          .checss {
            background-position: 0 0;
            color: #c20c0c;
          }
        }
      }
    }
  }
  .el-main {
    border-left: 1px solid #e7e7e7 !important;
    padding: 40px !important;
    overflow: hidden !important;
    .u-title {
      border-bottom: 2px solid #c20c0c;
      height: 33px;
      font-size: 20px;
      line-height: 28px;
    }
    .cart {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20px;
      li {
        a {
          color: #333;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      li:last-child {
        font-size: 12px;
        color: #333;
      }
      .redcol {
        background-color: #c20c0c;
        border-radius: 3px;
        padding: 4px;
        a {
          color: #fff;
        }
      }
    }
    .artists {
      margin: 20px 0 0 0px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // padding-bottom: 30px;
        .headpic {
          display: block;
          width: 130px;
          height: 130px;
          margin-top: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          margin-top: 8px;
          height: 17px;
          .name {
            display: inline-block;
            max-width: 80%;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            font-size: 14px;
            width: 130px;
            height: 30px;
          }
          .iconfont {
            width: 17px;
            height: 18px;
            background-image: url(../../../assets/image/icon.png);
            background-position: 0 -740px;
          }
        }
      }
    }
  }
}
</style>
